var offset = 0;
var limit = 10;

function lookupFollow(followId) {
	var userId = $.cookie('useraccount'); 
	$.ajax({
		url : "/follow?action=isExist&userId="+userId+"&followId="+followId,
		type: 'GET',
		data: '',
		success : function(resp) {
			 if (resp != '' && resp != null) {
				var data = resp.data;
				if (data.length > 0) {
					$("#" + followId).attr('checked', true);
				}
			}
		},
		error : function(resp){
			alert('Cannot update! Please check again');
		}
		
	});
}

function updateFollow(followId) {
	var userId = $.cookie('useraccount'); 
	var checked = $("#"+followId).prop('checked');
	var friendName = $("#name"+followId).text();
	$.ajax({
		url : "/follow?action=update&userId="+userId+"&followId="+followId+"&checked="+checked+"&friendName="+friendName,
		type: 'POST',
		data: '',
		dataType:"html",
		success : function(resp) {
			if (resp!=''){
			}
		},
		error : function(resp){
			alert('Cannot update! Please check again');
		}
		
	});
};

function getLIItem(input) {
	var liItem = "";
	liItem = liItem +"<li class=\"item\"> <div > <a class=\"image lfloat\"> <img alt=\"\" src= ";
	liItem = liItem +"\"https://graph.facebook.com/"+input.id+"/picture\"> </a> <div class= ";
	liItem = liItem +"\"clearfix hidden\"> <div class=\"inline-block rfloat\"> <div class= ";
	liItem = liItem +"\"inline-block middle\" style=\"height: 50px\"></div> <div class= ";
	liItem = liItem +"\"inline-block middle\"> <div class=\"right\"> <div class=\"FollowButton\"> <input ";
	liItem = liItem +"type=\"checkbox\" id=\""+input.id+"\" onchange=\"updateFollow('"+input.id+"')\"> </div> </div> </div> </div> <div class=\"blockContent\"> <div ";
	liItem = liItem +"class=\"inline-block\"> <div class=\"inline-block middle\" style=\"height: 50px\"></div> ";
	liItem = liItem +"<div class=\"inline-block middle\"> <div> <a href=\"#\" id=\"name"+input.id+"\">"+input.name;
	liItem = liItem +"</a> </div> </div> </div> </div> </div> </div> </li> ";
	return liItem;
}

function loadResults() {
    var result = "";
    
	FB.api('/me/friends?offset='+offset+'&limit='+limit, function(response) {
	      
   			if (response.data != null) {
   				var $followList = $("#followList");
  	    	  var friends = response.data;
  	    		
  	    	  for ( var int = 0; int < friends.length; int++) {
  				var array_element = friends[int];
  				//var item = '<li>'+index+'.'+array_element.name+'</li>'
  				$followList.append(getLIItem(array_element));
  				lookupFollow(array_element.id);
  			}
  	      }
		});
};

function initMap() {
	loadResults();

    $(".scrollpane").scroll(function() {
        var $this = $(this);
        var $followList = $("#followList");
        var scrollTop = $this.scrollTop();
    	var height = $this.height();
    	var friendListHeight = $followList.height();
        if ($this.scrollTop() + $this.height() >= $followList.height()) {
        	
        	offset += 10;
            loadResults();
        }
    });
};
